<template>
    <div>
    
        <router-view></router-view>
        <ul class="bottom-block">
            <li>
                <router-link to="/home">首页</router-link>
            </li>
            <li>
                <router-link to="/mall">商城</router-link>
            </li>
            <li>
                <router-link to="/live">直播</router-link>
            </li>
            <li>
                <router-link to="/mine">我</router-link>
            </li>
        </ul>
    </div>
</template>


<style scoped lang="scss">
$theme-color: #ff0176;
$border-color: rgb(216, 216, 216);
.bottom-block {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    width: 100%;
    background-color: white;
    justify-content: space-around;
    border-top: 1px solid $border-color;
    z-index: 100;
    li {
        line-height: 50px;
        text-align: center;
        a {
            color: rgb(99, 99, 99);
            text-decoration: none;
        }
        .router-link-active {
            color: $theme-color;
        }
    }
}
</style>